<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <div class="naver">
        <div class="nav">
            <ul class="nav-left">
                <li><a href="#">小米网</a></li>
                <li>|</li>
                <li><a href="#">MIUI</a></li>
                <li>|</li>
                <li><a href="#">米聊</a></li>
                <li>|</li>
                <li><a href="#">游戏</a></li>
                <li>|</li>
                <li><a href="#">多看阅读</a></li>
                <li>|</li>
                <li><a href="#">云服务</a></li>
                <li>|</li>
                <li><a href="#">小米网移动版</a></li>
                <li>|</li>
                <li><a href="#">Select region</a></li>
                <li>|</li>
                <li><a href="#">米粉节答疑</a></li>
            </ul>
            <ul class="nav-right">
                <li><a href="#">注册</a></li>
                <li>|</li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
    <div class="header">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="header-right">
            <div class="header-row">
                <img src="images/clock.png" alt="">
                <span>4月14日开放购买</span>
            </div>
            <div class="header-seach">
                <input type="text" placeholder="搜索您需要的商品">
                <div class="word">
                    <a href="#" class="word-one">小米手环</a>
                    <a href="#" class="word-one">耳机音箱</a>
                    <a href="#" class="word-one">保护壳</a>
                </div>
                <button class="btn1"></button>
                <button class="btn2">购物车</button>
            </div>
        </div>
    </div>
    <div class="nav-wrap">
        <div class="nav-wrap-left">
            <div class="title">
                <a href="#">全部商品分类</a>
            </div>
            <div>
                <a href="#">购买手机</a>
                <ul>
                    <li><a href="#">小米Noto</a></li>
                    <li><a href="#">小米4</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">红米Noto</a></li>
                </ul>
            </div>
            <div>
                <a href="#">购买电视和平板</a>
                <ul>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">小米盒子</a></li>
                    <li><a href="#">小米平板</a></li>
                </ul>
            </div>
            <div>
                <a href="#">路由器与智能硬件</a>
                <ul>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">体重秤</a></li>
                    <li><a href="#">净化器与滤芯</a></li>
                </ul>
            </div>
            <div>
                <a href="#">插线板、移动电源和电池</a>
                <ul>
                    <li><a href="#">小米移动电源</a></li>
                    <li><a href="#">电池</a></li>
                    <li><a href="#">充电器</a></li>
                </ul>


            </div>
            <div>
                <a href="#">耳机音箱与存储卡</a>
                <ul>
                    <li><a href="#">小米头戴式耳机</a></li>
                    <li><a href="#">小米活塞耳机</a></li>
                </ul>
            </div>
            <div>
                <a href="#">保护套与贴膜</a>
                <ul>
                    <li><a href="#">保护套/保护壳</a></li>
                    <li><a href="#">贴膜</a></li>
                    <li><a href="#">防尘塞</a></li>
                </ul>
            </div>
            <div>
                <a href="#">后盖与个性化配件</a>
                <ul>
                    <li><a href="#">米键</a></li>
                    <li><a href="#">后盖</a></li>
                    <li><a href="#">贴纸</a></li>
                    <li><a href="#">手机支架</a></li>
                </ul>
            </div>
            <div>
                <a href="#">小米生活方式</a>
                <ul>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">米兔</a></li>
                    <li><a href="#">背包</a></li>
                    <li><a href="#">生活周边</a></li>
                </ul>
            </div>
        </div>
        <div class="nav-wrap-right">
            <ul class="nav-row">
                <li><a href="#">首页</a></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">小米平板</a></li>
                <li><a href="#">小米电视</a></li>
                <li><a href="#">盒子</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">合约机</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
            <div class="picture">
                <div id="list">
                    <img src="images/banner1.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner5.png" alt="">
                </div>
                <button id="prev"></button>
                <button id="next"></button>
                <div id="btns">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
            <div class="nav-bottom">
                <a class="trans" style="display: inline-block" href="#"><img src="images/01.png" alt=""
                        class="bordrb"></a>
                <a class="trans" style="display: inline-block" href="#"><img src="images/02.png" alt=""
                        class="bordrb"></a>
                <a class="trans" style="display: inline-block" href="#"><img src="images/03.png" alt=""
                        class="bordrb"></a>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#">小米明星单品</a>
        <a href="#">根据机型选配件</a>
        <div class="item-right">
            <button><img src="images/05.png" alt=""></button>
            <button><img src="images/06.png" alt=""></button>
        </div>
    </div>
    <div class="product-row">
        <div class="trans">
            <a href="#"><img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt=""></a>
            <a href="#">小米智能家电</a>
            <a href="#">让普通家电变得智能</a>
        </div>
        <div class="trans">
            <a href="#"><img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt=""></a>
            <a href="#">小米空气净化器</a>
            <a href="#">高性能智能空气净化器立即预约</a>
        </div>
        <div class="trans">
            <a href="#"><img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt=""></a>
            <a href="#">小米活塞耳机简装版</a>
            <a href="#">好声音源自活塞式音腔，延续经典设计</a>
        </div>
        <div class="trans">
            <a href="#"><img src="images/aa.jpg" alt=""></a>
            <a href="#">小米路由器</a>
            <a href="#">顶级双屏幕AC智能路由器，内置1TB大硬盘</a>
        </div>
    </div>
    <div class="item2">
        <a href="#">新品上架</a>
        <a href="#">更多></a>
    </div>
    <div class="content">
        <div class="content-left">
            <div class="left1">
                <div class="left1-1 trans">
                    <a href="#"><img src="images/fanghezi0407xiao.jpg" alt=""></a>
                </div>
                <div class="left1-2 trans">
                    <p>小米手环</p>
                    <p>79元</p>
                    <a href="#"><img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt=""></a>
                </div>
            </div>
            <div class="left1">
                <div class="left2-1">
                    <div class="left2-1-1 trans">
                        <div>
                            <p>5周年米兔钥匙扣</p>
                            <p>9.9元</p>
                        </div>

                        <div><a href="#"><img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt=""></a></div>
                    </div>
                    <div class="left2-1-1 trans">
                        <div>
                            <p>QCY派Q8蓝牙耳机</p>
                            <p>59.9元</p>
                        </div>

                        <a href="#"><img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt=""></a>
                    </div>
                </div>
                <div class="left2-2 trans">
                    <p>小米T恤路标MILOGO</p>
                    <p>39元</p>
                    <a href="#"><img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt=""></a>
                </div>
                <div class="left1-2 trans">
                    <p>小米实木后盖</p>
                    <p>69元</p>
                    <a href="#"><img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt=""></a>
                </div>
            </div>
            <div class="left3">
                <div class="left3-1 trans">
                    <p>小米Note超薄保护壳</p>
                    <p>49元</p>
                    <a href="#"><img src="images/baohuke.png" alt=""></a>
                </div>
                <div class="left3-2 trans">
                    <p>小米自拍杆</p>
                    <p>49元</p>
                    <a href="#"><img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt=""></a>
                </div>
                <div class="left3-3 trans">
                    <p>先锋CL31系列耳式耳机</p>
                    <p>99元</p>
                    <a href="#"><img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="content-right">
            <div class="row1">
                <div>
                    <a class="row-word">特价商品</a>
                    <a href="#">SanDisk32GB存储卡</a>
                    <p>
                        <span>79元</span>
                        <span>109元</span>
                    </p>
                    <p>还有更多特价商品</p>
                </div>
                <div>
                    <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                </div>
            </div>
            <div class="row1">
                <div class="row1-div">
                    <a href="#" class="row1-word">特惠配件套餐</a>
                    <p>手机必备配件组合购买</p>
                    <p>实惠更优惠</p>
                </div>
                <div>
                    <img src="images/channel-list-cool.jpg" alt="">
                </div>
            </div>
            <div class="row1">
                <div class="row1-div">
                    <a href="#" class="row1-word">我爱酷玩</a>
                    <p>邂逅炫酷的电子产品</p>
                    <p>结交趣味相投的朋友</p>
                </div>
                <div>
                    <img src="images/channel-list-new.jpg" alt="">
                </div>
            </div>
            <div class="sever">
                <ul>
                    <li><a href="#" class="part touch">企业用户采购通告<span class="js">></span></a></li>
                    <li><a href="#" class="part touch">小米手机防伪查询<span class="js">></span></a></li>
                    <li><a href="#" class="part touch">小米手机官方版<span class="js">></span></a></li>
                    <li><a href="#" class="part touch">小米路由器官方版<span class="js">></span></a></li>
                    <li><a href="#" class="part touch">米粉红包<span class="js">></span></a></li>
                </ul>
            </div>
            <div class="phone-charge">
                <p class="one">话费充值</p>
                <input class="two" type="text" placeholder="请输入手机号">
                <input class="two" type="text" placeholder="100元">
                <p class="three">实付价格98.4元起</p>
                <button class="pay">立即充值</button>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer1">
            <div class="ft-top">
                <div class="last">
                    <a class="touch" href="#">
                        <i><img src="images/10.png" alt=""></i>
                        <br><br>
                        一小时快修服务
                    </a>
                </div>
                <div class="last">
                    <img src="images/11.png" alt=""><br><br>
                    <a class="touch" href="#">七天无理由退货</a>
                </div>
                <div class="last">
                    <img src="images/12.png" alt=""><br><br>
                    <a class="touch" href="#">15天免费换货</a>
                </div>
                <div class="last">
                    <img src="images/13.png" alt=""><br><br>
                    <a class="touch" href="#">满150元包邮</a>
                </div>
                <div class="last">
                    <img src="images/14.png" alt=""><br><br>
                    <a class="touch" href="#">520余家网店售后</a>
                </div>
            </div>
            <div class="ft-cent">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">相关下载</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd><a href="#">小米之家</a></dd>
                    <dd><a href="#">网店服务</a></dd>
                    <dd><a href="#">授权服务点</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd><a href="#">了解小米</a></dd>
                    <dd><a href="#">加入小米</a></dd>
                    <dd><a href="#">加入我们</a></dd>

                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">小米部落</a></dd>
                    <dd><a href="#">官方微信</a></dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p>
                        周一至周日 8:00-18:00 <br>
                        （仅收市话费）
                    </p>
                    <button>24小时客服在线</button>
                </div>
            </div>
            <div class="ft-bot">
                <p>
                    <a> 小米旗下网站：</a>
                    <a class="touch" href="#">小米网</a>
                    <span>|</span>
                    <span><a class="touch" href="#">MIUI</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">米聊</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">多看书城</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">小米路由器</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">繁体台湾</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">繁体香港</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">English</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">小米天猫店</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">小米后院</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">小米淘宝直销店</a></span>
                    <span>|</span>
                    <span><a class="touch" href="#">小米网盟</a></span>
                </p>
                <p class="frist">
                    <a>©</a> 
                    <a class="touch" href="https://www.mi.com/">mi.com</a>  
                    <a>京ICP证110507号</a>  
                    <a class="touch" href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action;jsessionid=bbnbMueFrfFztfn2O5fBPY5KJqb28EhtmIWZiX4_s9d5xVjGxiSo!2144121308">京ICP备10046444号</a>  
                    <a class="touch" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134">京公网安备11010802020134号 </a> 
                    <a class="touch" href="https://i8.mifile.cn/b2c-mimall-media/63cbc1342511938fc1395113f81324c4.jpg"> 京网文[2017]1530-131号</a>
                </p>
                <div class="language" >
                    <img src="images/16.png" alt="">
                    <input type="text" class="lang" placeholder="简体中文">
                    
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            var index = 0;
            $("#next").click(function () {
                index++;
                if (index > 5) {
                    index = 0;
                }
                console.log(index);
                $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            $("#prev").click(function () {
                index--;
                console.log(index);
                if (index < 0) {
                    index = 5;
                }
                $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            $("#btns span").click(function () {
                let i = $(this).index();
                console.log(i);
                index = i;
                $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })

            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 2000)
            }

            function stop() {
                clearInterval(timer)
            }
            $(".picture").mouseover(function () {
                stop();
            })
            $(".picture").mouseout(function () {
                play();
            })
            play();
        })
    </script>
</body>

</html>